<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="skillClassification" label="执业注册类型" min-width="150" />
      <el-table-column prop="certificateNo" label="注册证书编号" min-width="120" />
      <el-table-column prop="issueDate" label="发证日期" min-width="120" />
      <el-table-column prop="practicingSealNumber" label="执业印章号" min-width="120" />
      <el-table-column prop="registerEndDate" label="注册有效期" min-width="120" />
      <el-table-column prop="statusName" label="资质证书状态" min-width="120" />
      <el-table-column prop="holder" label="持有人" min-width="120" />
      <el-table-column fixed="right" label="操作" width="150">
        <template #default="scope">
          <el-button
            v-if="optionType != 3"
            link
            type="primary"
            size="small"
            @click="handleDelet(scope.row, scope.index)"
            >删除</el-button
          >
          <el-button link type="primary" size="small" @click="handleDetail(scope.row, scope.index)"
            >注册专业详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="detailVisible"
      title="注册专业详情"
      draggable
      close-icon="CloseBold"
      width="900"
      :close-delay="200"
      style="margin-top: 5vh"
      @close="handleHide"
    >
      <el-table :data="detailData" style="width: 100%">
        <el-table-column prop="code" label="注册专业编号" min-width="150" />
        <el-table-column prop="specialityName" label="注册专业名称" min-width="150" />
        <el-table-column prop="startDate" label="注册专业起始日期" min-width="150" />
        <el-table-column prop="endDate" label="注册专业截止日期" min-width="150" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  tableData: {
    type: Array as PropType<any[]>,
    default: () => [],
  },
  optionType: {
    type: Number,
    default: 1,
  },
});
const detailVisible = ref(false);
const { tableData, optionType } = toRefs(props);
const detailData = ref();
const emit = defineEmits(["deleteRow"]);
function handleDelet(row: any, index: number) {
  emit("deleteRow", 5, index);
}
const handleDetail = (row: any, index: number) => {
  console.log(row);
  if (row.speciality) {
    detailData.value = row.speciality;
  } else {
    detailData.value = [];
  }
  detailVisible.value = true;
};
const handleHide = () => {
  detailVisible.value = false;
};
</script>

<style scoped></style>
